<template>
  <div class="task-list">
    <el-empty v-if="!tasks?.length" :description="emptyText" />
    
    <template v-else>
      <div 
        v-for="task in tasks" 
        :key="task.id" 
        class="task-item"
        :class="{ 
          'is-completed': task.status === 'completed',
          'is-in-progress': task.status === 'in_progress'
        }"
      >
        <div class="task-content">
          <div class="task-header">
            <h3>{{ task.title }}</h3>
            <div class="task-reward">
              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>经验值: {{ task.reward?.experience || 0 }}</div>
                  <div v-if="task.reward?.coins">金币: {{ task.reward.coins }}</div>
                </template>
                <span>
                  奖励: {{ task.reward?.experience || 0 }}经验
                  <template v-if="task.reward?.coins">
                    + {{ task.reward.coins }}金币
                  </template>
                </span>
              </el-tooltip>
            </div>
          </div>
          
          <p class="task-description">{{ task.description }}</p>
          
          <div class="task-progress" v-if="task.status === 'in_progress'">
            <el-progress 
              :percentage="task.progress || 0" 
              :status="task.progress === 100 ? 'success' : ''"
            />
          </div>
          
          <div class="task-footer">
            <div class="task-info">
              <el-tag size="small" :type="getTaskTypeColor(task.type)">
                {{ getTaskTypeLabel(task.type) }}
              </el-tag>
              <el-tag size="small" :type="getTaskDifficultyColor(task.difficulty)">
                {{ getDifficultyLabel(task.difficulty) }}
              </el-tag>
              <el-tag 
                size="small" 
                :type="getStatusColor(task.status)"
              >
                {{ getStatusLabel(task.status) }}
              </el-tag>
            </div>

            <div class="task-actions">
              <template v-if="task.status === 'pending'">
                <el-button
                  type="primary"
                  size="small"
                  :loading="loading"
                  @click="handleTaskAction(task, 'start')"
                >
                  开始任务
                </el-button>
              </template>

              <template v-else-if="task.status === 'in_progress'">
                <el-button
                  type="success"
                  size="small"
                  :loading="loading"
                  @click="handleTaskAction(task, 'complete')"
                >
                  完成任务
                </el-button>
              </template>

              <template v-else-if="task.status === 'completed'">
                <el-tag
                  type="success"
                  effect="dark"
                  size="small"
                >
                  已完成
                </el-tag>
              </template>

              <template v-else-if="task.status === 'failed'">
                <el-tag
                  type="danger"
                  effect="dark"
                  size="small"
                >
                  已失败
                </el-tag>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useTaskStore } from '../stores/task'
import { ElMessageBox } from 'element-plus'
import { formatDateTime, formatDuration } from '../utils/helpers'

export default {
  name: 'TaskList',
  props: {
    tasks: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: '暂无任务'
    }
  },
  emits: ['start', 'complete'],
  setup(props, { emit }) {
    const taskStore = useTaskStore()

    const handleTaskAction = async (task, action) => {
      try {
        if (action === 'start') {
          if (task.status === 'completed') {
            ElMessageBox.alert('该任务已完成', '提示', { type: 'warning' })
            return
          }
          if (task.status === 'in_progress') {
            ElMessageBox.alert('该任务已在进行中', '提示', { type: 'warning' })
            return
          }
          emit('start', task.id)
        } else if (action === 'complete') {
          emit('complete', task.id)
        }
      } catch (error) {
        console.error(`Failed to ${action} task:`, error)
        ElMessageBox.alert(error.message || `完成任务失败`, '错误', {
          type: 'error'
        })
      }
    }

    const getTaskTypeColor = (type) => {
      const colors = {
        daily: 'success',
        story: 'warning',
        training: 'primary',
        interaction: 'info'
      }
      return colors[type] || 'info'
    }

    const getTaskTypeLabel = (type) => {
      const labels = {
        daily: '日常任务',
        story: '剧情任务',
        training: '训练任务',
        interaction: '互动任务'
      }
      return labels[type] || type
    }

    const getTaskDifficultyColor = (difficulty) => {
      const colors = {
        easy: 'success',
        medium: 'warning',
        hard: 'danger'
      }
      return colors[difficulty] || 'info'
    }

    const getDifficultyLabel = (difficulty) => {
      const labels = {
        easy: '简单',
        medium: '中等',
        hard: '困难'
      }
      return labels[difficulty] || difficulty
    }

    const getStatusLabel = (status) => {
      const labels = {
        pending: '待开始',
        in_progress: '进行中',
        completed: '已完成',
        failed: '已失败'
      }
      return labels[status] || status
    }

    const getStatusColor = (status) => {
      const colors = {
        pending: 'info',
        in_progress: 'warning',
        completed: 'success',
        failed: 'danger'
      }
      return colors[status] || 'info'
    }

    return {
      getTaskTypeColor,
      getTaskTypeLabel,
      getTaskDifficultyColor,
      getDifficultyLabel,
      getStatusLabel,
      getStatusColor,
      handleTaskAction
    }
  }
}
</script>

<style scoped>
.task-list {
  margin-top: 20px;
}

.task-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.task-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.task-item.is-completed {
  opacity: 0.8;
  background: #f8f9fa;
}

.task-item.is-in-progress {
  border-color: var(--el-color-primary);
}

.task-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-header h3 {
  margin: 0;
  color: var(--el-text-color-primary);
}

.task-reward {
  color: #f56c6c;
  font-weight: bold;
}

.task-description {
  color: var(--el-text-color-regular);
  margin: 0;
  line-height: 1.5;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.task-info {
  display: flex;
  gap: 8px;
}

.task-progress {
  margin: 8px 0;
}
</style>
